<template>
	<div class="overview_data" :class="layout">
		<h2>{{ title }}</h2>
		<el-progress :text-inside="true" :stroke-width="32" :percentage="dataPercentage || 0"></el-progress>
		<ul>
			<li v-for="(item, index) in dataConvert" :key="index" :class="item.icon">
				<h4>{{ item.label }}</h4>
				<p>{{ item.value }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
import lodash from 'lodash';
export default {
	props: {
		title: String,
		layout: String,
		data: { type: Array, default: () => [] }
	},
	data() {
		return {
			convertData: [
				{ label: '已完成', icon: 'el-icon-success', type: '1' },
				{ label: '等待中', icon: 'el-icon-refresh', type: '2' },
				{ label: '转码失败', icon: 'el-icon-error', type: '3' }
			]
		};
	},
	computed: {
		dataPercentage() {
			let finishData = this.data.find((item) => item.isFinish === '1');
			let finish = Number(!finishData ? 0 : finishData.total || 0);
			let total = lodash.reduce(this.data, (sum, cur) => sum + Number(cur.total || 0), 0);
			return parseInt((finish / total) * 10000) / 100;
		},
		dataConvert() {
			return this.convertData.map((item) => {
				let obj = { ...item };
				let info = this.data.find((n) => n.isFinish === item.type);
				obj['value'] = !info ? 0 : Number(info.total);
				return obj;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.overview_data::v-deep {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	h2 {
		font-size: 20px;
		line-height: 1;
		color: #fff;
		margin: 16px 0;
	}
	.el-progress {
		width: 70%;
	}
	.el-progress-bar {
		padding: 4px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.1);
		border: solid 1px rgba(255, 255, 255, 0.5);
	}

	.el-progress-bar__outer {
		background: none !important;
	}
	&.left {
		align-items: flex-start;

		.el-progress-bar__inner {
			left: 0;
			right: auto;
			text-align: right;
			background: linear-gradient(180deg, #19b21e 0%, rgba(25, 178, 30, 0.3) 100%);
		}

		li::before {
			color: #19b21e;
		}
	}

	&.right {
		align-items: flex-end;

		.el-progress-bar__inner {
			left: auto;
			right: 0;
			text-align: left;
			direction: rtl;
			background: linear-gradient(180deg, #0d6ce4 0%, rgba(13, 108, 228, 0.3) 100%);
		}
	}

	.el-progress-bar__innerText {
		font-size: 18px;
		margin: 0 16px;
		color: #fff !important;
	}

	ul {
		display: flex;
		width: 96%;
		padding: 0;
		margin-top: 32px;
	}

	li {
		flex: 1;
		border-radius: 8px;
		border: solid 1px rgba(255, 255, 255, 0.5);
		background-color: rgba(255, 255, 255, 0.18);
		margin-right: 10px;
		padding: 10px;
		color: #fff;
		line-height: 1;

		&::before {
			float: right;
			font-size: 20px;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
			color: #0d6ce4;
			padding: 6px;
			margin-top: 3px;
		}
		&:last-child {
			margin-right: 0;
		}

		h4 {
			font-size: 12px;
			font-weight: normal;
		}

		p {
			font-size: 20px;
			margin-top: 6px;
		}

		&:first-child {
			margin-left: 0;
		}

		&:nth-child(3)::before {
			color: #f56c6c;
		}

		&:nth-child(4)::before {
			color: #f56c6c;
		}
	}
}
</style>
